<template>
  <view class="container">
    <!-- 设备列表 -->
    <view class="device-list">
      <uni-card v-for="(device, index) in devices" :key="index" :is-shadow="true" class="device-card">
        <view class="device-content">
          <uni-icons :type="device.icon" size="40" color="#32c5d2" />
          <view class="device-info">
            <text class="device-name">{{ device.name }}</text>
            <text class="device-status">{{ device.status }}</text>
          </view>
          <uni-icons type="more" size="30" color="#999" />
        </view>
      </uni-card>
    </view>

    <!-- 添加设备按钮 -->
    <view class="add-device"  @click="scanCode">
      <uni-icons type="plusempty" size="30" color="#32c5d2" />
      <text class="add-text">添加设备</text>
    </view>
  </view>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const devices = reactive([
      { icon: 'camera', name: '摄像头一', status: '在线' },
      { icon: 'camera', name: '摄像头二', status: '离线' },
      { icon: 'home', name: '智能门锁', status: '在线' },
    ])

    return {
      devices,
    }
  },
  methods:{
    scanCode() {
      // 允许从相机和相册扫码
      wx.scanCode({
        success (res) {
          console.log(res)
        }
      })
      
      // 只允许从相机扫码
      wx.scanCode({
        onlyFromCamera: true,
        success (res) {
          console.log(res)
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
$padding: 20rpx;
$background-color: #f8f8f8;
$text-color: #333;
$secondary-text-color: #999;
$primary-color: #32c5d2;

.container {
  padding: $padding;
  background-color: $background-color;
  min-height: 100vh;
}

.device-list {
  margin-bottom: 40rpx;
}

.device-card {
  margin-bottom: 1rpx;
}

.device-content {
  display: flex;
  align-items: center;
}

.device-info {
  flex-grow: 1;
  margin-left: 16rpx;
}

.device-name {
  font-size: 28rpx;
  color: $text-color;
}

.device-status {
  font-size: 24rpx;
  color: $secondary-text-color;
}

.add-device {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
}

.add-text {
  font-size: 28rpx;
  color: $primary-color;
  margin-left: 12rpx;
}
</style>